<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html lang="es" xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
		<script type="text/javascript" src="<?php echo base_url();?>assets/js/jquery/jquery190.js"></script>
		<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=true"></script>
		
		<script>
			$(document).ready(function() 
			{
				var base_places_url='http://monitoring-twomarks.googlecode.com/svn/trunk/places/kml/';
				var map = new google.maps.Map(document.getElementById('map_canvas'), { center: new google.maps.LatLng(21.17, -86.66), zoom: 9, mapTypeId: google.maps.MapTypeId.HYBRID, scaleControl: true });
				   
				var polygon = new google.maps.KmlLayer(base_places_url+'fichero33.kml');
				polygon.setMap(map);

				mapClick = google.maps.event.addListener( map, "click", function( evt ) {
				    alert("out");
				} );

				polygonClick = google.maps.event.addListener( polygon, "click", function( evt ) {
				    alert("in");
				} );
								
			});
			
//////////******************************************/////////////
			/*
			$(document).ready(function () 
			{
			    var map = new google.maps.Map(document.getElementById('map_canvas'), { center: new google.maps.LatLng(21.17, -86.66), zoom: 9, mapTypeId: google.maps.MapTypeId.HYBRID, scaleControl: true });
			    var isClosed = false;
			    var poly = new google.maps.Polyline({ map: map, path: [], strokeColor: "#FF0000", strokeOpacity: 1.0, strokeWeight: 2 });
			    
			    google.maps.event.addListener(map, 'click', function (clickEvent) 
				{
			        if (isClosed)
			            return;
		            
			        var markerIndex = poly.getPath().length;
			        var isFirstMarker = markerIndex === 0;
			        var marker = new google.maps.Marker({ map: map, position: clickEvent.latLng, draggable: true });

				    if (isFirstMarker) 
					{
						google.maps.event.addListener(marker, 'click', function () 
						{
			                if (isClosed)
			                    return;
			                var path = poly.getPath();
			                poly.setMap(null);
			                poly = new google.maps.Polygon({ map: map, path: path, strokeColor: "#FF0000", strokeOpacity: 0.8, strokeWeight: 2, fillColor: "#FF0000", fillOpacity: 0.35 });
			                isClosed = true;
			                createKml(poly);
			            });
			            
			        }
			        
			        google.maps.event.addListener(marker, 'drag', function (dragEvent) 
					{
			            poly.getPath().setAt(markerIndex, dragEvent.latLng);
			        });
			        
			        poly.getPath().push(clickEvent.latLng);
			        
			    });
			    
			});
			
			function createKml(polygon)
			{
				var path = polygon.getPath();
				var data="";
				
	            for(var i = 0; i < path.length; i++) {
	            	//$("#action").html($("#action").html()+ path.getAt(i).lat()+','+path.getAt(i).lng()+',0 ');
	            	data+= path.getAt(i).lat()+','+path.getAt(i).lng()+',0 ';
	            }

				var request = $.ajax(
	    	    {
					url: "testkml/createXML",
					type: "POST",
					data: {data: data},

           		});
           		request.done(function(msg) 
                {
           			$("#action").html(msg);
               								   	
           		});
           		request.fail(function(jqXHR, textStatus) 
                {
					alert( "Request failed: " + textStatus );
           		});
	            
			}*/
			
		</script>
		<style type="text/css">
			html { height: 100% }
			body { height: 100%; margin: 0px; padding: 0px }
			#map_canvas { height: 100% }
		</style>
						 
	</head>
	<body>
	<div id="action">A</div>
		<div id="map_canvas" style="width:100%; height:100%"></div>
		
	</body> 
</html>
